import React, {useEffect, useRef} from 'react';
import "./assets/style/weibo.css"
import {getWeibo, postWeibo} from "./api/weibo";
import {upContentList} from "./store/slice/weibo";
import {useSelector,useDispatch} from "react-redux";


function App(props) {
    const {contentList} = useSelector(state=>state.weibo)
    const dispatch = useDispatch()
    const contentRef = useRef();
    // const [contentList,setContentList] = useState(store.getState().weibo.contentList);
    // 添加微博
    const postWeiboAsync = async ()=>{
        const content = contentRef.current.value.trim()
        if(content.length === 0){
            alert("请输入微博内容");
            return;
        }
        await postWeibo(content);// 添加微博
        contentRef.current.value = null;
        getWeiboAsync();
    }
    // 获取微博
    const getWeiboAsync = async()=>{
        const {contentList} = await getWeibo(1,30);
        dispatch(upContentList(contentList))
        // store.dispatch(upContentList(contentList));
    }
    useEffect(()=>{
        getWeiboAsync();
    },[])
    return (
        <div className="jyArea">
            <div className="takeComment">
                <textarea ref={contentRef} name="textarea" className="takeTextField" id="tijiaoText"></textarea>
                <div className="takeSbmComment">
                    <input onClick={postWeiboAsync} type="button" className="inputs" value=""/>
                </div>
            </div>


            <div className="commentOn">
                <div className="noContent" style={{display:contentList.length===0?"block":"none"}}>暂无留言</div>
                <div className="messList">
                    {
                        contentList.map(item=>(
                            <div key={item._id} className="reply">
                                <p className="replyContent">{item.content}</p>
                                <p className="operation">
                                    <span className="replyTime">{item.addTime}</span>
                                    <span className="handle">
                                        <a href="" className="top">{item.topNum}</a>
                                        <a href="" className="down_icon">{item.downNum}</a>
                                        <a href="" className="cut">删除</a>
                                    </span>
                                </p>
                            </div>
                        ))
                    }

                </div>
                <div className="page">
                    <a href="" className="active">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                </div>
            </div>
        </div>
    );
}

export default App;